<!--
 * @Author: 'yangyuhang1203' '2621131059@qq.com'
 * @Date: 2025-09-10 10:09:58
 * @LastEditors: 'yangyuhang1203' '2621131059@qq.com'
 * @LastEditTime: 2025-09-10 11:07:17
 * @FilePath: \企业级\前端\js\对象\DOM元素获取.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="h1" src="image.png"> <br><br>
    <div class="cls">杰普软件</div> <br>
    <div class="cls">Java程序员</div> <br>
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>
    <script>
    //1. 获取Element元素
    //1.1 获取元素-根据ID获取
    var img = document.getElementById('h1');
    console.log(img);
    console.log(typeof img);
    //1.2 根据元素class属性获取数组
    var img2 = document.getElementsByClassName("cls");
    console.log(img2);//HTMLCollection
    console.log(typeof img2);
    //根据元素标签名字获取数组
    var img3 = document.getElementsByTagName("input");
    console.log(img3);//NodeList
    //根据元素名字属性获取数组
    var img4 = document.getElementsByName("hobby");
    console.log(img4);
    console.log(img3==img4);//先对两个值进行强制类型转换，将它们转为 “相同类型” 后，再按严格比较的规则判断值是否相等   false
    console.log(img3===img4);//严格比较（===）：“类型优先，值其次”  false
    //虽然 img3 和 img4 包含的元素相同，但它们是不同的集合对象（一个是 HTMLCollection，一个是 NodeList）
    // 对比一下相同元素的不同访问形式，是否相同
    console.log(img3[0] == img4[0]);//true
    console.log(img3[0] === img4[0]);//true
    //两个集合中对应位置的元素是同一个 DOM 元素（第一个复选框）
    // 2.修改标签内容
    var divs = document.getElementsByClassName('cls');
    var div1 = divs[1];
    div1.innerHTML = "九九六狂人";
    </script>
</html>